<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>侧边展开导航栏</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Homepage.css">

    <link rel="stylesheet" type="text/css" href="css/StyleForInfoPage.css"/>

</head>

<body>
<div class="navbar">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="titleLabel">
        <i class="fa fa-bars" aria-hidden="true">
        	&nbsp;&nbsp;个人中心
        </i>
    </label>
    <ul>
        <div id="icon">
    		<li>
	            <img :src="user.icon" alt="">
	            <span>欢迎您！{{user.nickname}}</span>
	        </li>
    	</div>
        <li>
            <a href="Manager-bubble-Homepage.html">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="Manager-HotAd-Page.html">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <span>本月热门</span>
            </a>
        </li>
        <li>
            <a href="Manager-Info-Page.html">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                <span>个人中心</span>
            </a>
        </li>
        <li>
            <a href="Manager-Buy-Page.html">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                <span>购买广告</span>
            </a>
        </li>
        <li>
            <a href="Manager-user-list.html">
                <i class="fa fa-users" aria-hidden="true"></i>
                <span>用户列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-advlist.html">
                <i class="fa fa-sitemap" aria-hidden="true"></i>
                <span>广告列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-Chat-Page.html">
                <i class="fa fa-comments" aria-hidden="true"></i>
                <span>聊天窗口</span>
            </a>
        </li>
        <li onclick="Logout()">
            <a href="javascript:void(0)">
                <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>
    <div id="app" class="main_info" >
        <div class="info-page">
            <!--个人信息区-->
            <div class="div_distance">
                <table style="border: 0; color: #a262ad;">
                    <tr>
                        <td rowspan="5" style="">
                        	<div style="width: 200px; height: 200px;" onclick="document.getElementById('iconUpload').click()">
                        		<form action="User?type=icon" method="post" enctype="multipart/form-data">
                        			<input type="file" id="iconUpload" name="icon" onchange="this.form.submit();" style="display: none;" accept="image/*" />
                        			<!--<input type="submit" value=""/>-->
                        		</form>
                        		<img :src="user.icon" style="width: 100%; height: 100%; border-radius: 50%;" />
                        	</div>
                        </td>
                        <td style="width: 500px; height: 80px;"></td>
                    </tr>
                    <tr>
                        <td style="width: 500px; height: 30px;"> &nbsp;&nbsp;昵称：{{user.nickname}}</td>
                    </tr>
                    <tr>
                        <td style="width: 500px; height: 30px;"> &nbsp;&nbsp;用户名：{{user.username}}</td>
                    </tr>
                    <tr>
                        <td style="width: 500px; height: 30px;">&nbsp;&nbsp;余额: {{user.money}} <a href="Manager-Charge-Page.html" style="color:#a262ad;font-weight: bold">充值</a></td>
                    </tr>
                    <tr>
                        <td style="width: 500px; height: 30px;"> &nbsp;&nbsp;邮箱：{{user.email}}</td>
                    </tr>

                </table>


            </div>

            <!--名下拥有的广告-->
            <div class="div_distance">
                <!--工具栏-->
                <div >
                    <button type="button" title="新增" onclick='location.href="Manager-Buy-Page.html"'><i class="fa fa-file-o"></i> 新增</button>
                    <button type="button" title="刷新" onclick="window.location.href='Manager-Info-Page.html'"><i class="fa fa-refresh"></i> 刷新</button>

                    <input type="text" class="search-bar" placeholder="搜索广告ID" v-model="ad_id" v-on:focus="searchAdById">

                </div>

                <!--工具栏/-->

                <!--数据列表-->
                <table style="text-align: center;color: #a262ad;"class="table">
                    <thead>
                    <tr >
                        <th style="width: 80px"  class="">ID</th>
                        <th style="width: 240px" class="">品牌名称</th>
                        <th style="width: 400px" class="">网站地址</th>
                        <th style="width: 300px" class="">企业名称</th>
                        <th style="width: 300px" class="">品牌描述</th>
                        <th style="width: 120px" class="">状态</th>
                        <th style="width: 100px" class="">泡泡尺寸</th>
                        <th style="width: 100px" class="">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="(ad,index) in ads" :key="index" :class="{ even: index % 2 === 0 }">
                        <td class="td">{{ad.ad_id}}</td>
                        <td class="td">{{ad.ad_brand_name}}</td>
                        <td class="td">{{ad.ad_website}}</td>

                        <td class="td">{{ad.ad_company_name}}</td>
                        <td class="td">{{ad.ad_description}}</td>
                        <td class="td">
                            <span v-if="ad.ad_status == 1">启用</span>
                            <span v-else-if="ad.ad_status == 0">停用</span>
                            <span style="color: red;" v-else>获取失败</span>

                        </td>

                        <td class="td">{{ad.ad_size}}</td>

                        <td class="td">
                            <button type="button" @click="editAdInfo(ad.ad_id)"><i class="fa fa-edit"></i> 编辑</button>
                            <button type="button" @click="delConfirm(ad.ad_id)"><i class="fa fa-trash-o"></i> 删除</button>

                        </td>
                    </tr>

                    </tbody>
                    <!--
                <tfoot>
                <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
                </tr>
                </tfoot>-->
                </table>
                <!--数据列表/-->
                
                
                <div style="width: 100%; height: 150px;">
                	<!--空白-->
                </div>


            </div>
        </div>

    </div>

</div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script src="js/GetInfo.js"></script>

<script>
    function Logout() {
        var flag = window.confirm("确定退出登录吗？");
        if (flag) {
            window.location.href = "AdInfo?type=logout";
        }
    };
    
    new Vue({
        el: "#app",
        data: {
            user: "",
            ads: [],
            ad_id: ""
        },
        methods: {
            getUserInfoById() {
                var _this = this;
                axios({
                    method: "get",
                    url: "User?type=user"

                }).then(function(resp){
                    _this.user = resp.data;
                })
            },
            getAdsInfoById() {
                var _this = this;
                axios({
                    method: "get",
                    url: "AdInfo?type=ads"

                }).then(function(resp){
                    _this.ads = resp.data;
                })
            },
            editAdInfo(ad_id) {
                url = "Manager-Edit-Page.html?ad_id=" + ad_id;
                window.location.href = url;
            },
            delConfirm(ad_id) {
                var flag = window.confirm("确定删除吗？");
                if (flag) {
                    var _this = this;
                    axios({
                        method: "post",
                        url: "AdInfo?type=del",
                        data: "ad_id="+ad_id
                    }).then(function(resp) {
                        window.location.reload();
                    })
                }
            },
            searchAdById() {
            	var _this = this;
            	
                document.addEventListener('keypress', function (ev) {
                    if (ev.keyCode == 13) {
                    	var ad_id = _this.ad_id;
                    	window.location.href = "Manager-Info-page.html?ad_id="+ad_id;
                    }
                })
            }

        },
        mounted() {
            this.getUserInfoById();
            
            var url = window.location.search; //获取浏览器的地址值?id=1
        	var parame = url.split("="); //用=切割url地址栏的参数
            if (parame.length == 1) {
            	this.getAdsInfoById();
            } else {
            	var id = parame[1]; //获取到对应的参数值
            	var _this = this;
            	axios({
            		method: "post",
            		url: "AdInfo?type=search",
            		data: "ad_id="+id
            	}).then(function(resp) {
            		_this.ads = resp.data;
            		console.log(resp.data);
            	})
            }
            
        }
    })

</script>

<style>
    .even {
        /* 为偶数行定义样式 */
        background-color: #e3eeff;
    }
</style>


<!--123-->
</html>